<script setup lang="ts">
import { computed } from 'vue'
import { ElCard, ElForm, ElFormItem, ElButton, ElSelect, ElOption, ElInput } from 'element-plus'
import { useEditorStore } from '@/stores/editor'

const store = useEditorStore()

const clickActions = computed({
  get() {
    return store.selectedNode?.events?.click || []
  },
  set(value) {
    if (store.selectedNode) {
      store.selectedNode.events = {
        ...store.selectedNode.events,
        click: value
      }
    }
  }
})

const addClickAction = () => {
  clickActions.value.push({ type: 'alert', params: { message: '' } })
}

const removeAction = (index: number) => {
  clickActions.value.splice(index, 1)
}
</script>

<template>
  <ElCard header="事件配置" v-if="store.selectedNode">
    <ElForm label-position="top">
      <ElFormItem label="点击事件">
        <ElButton size="small" @click="addClickAction">➕ 添加动作</ElButton>
        <div v-for="(action, index) in clickActions" :key="index" class="action-item">
          <ElSelect v-model="action.type" placeholder="动作类型">
            <ElOption value="alert" label="弹窗提示" />
            <ElOption value="http" label="HTTP 请求" />
          </ElSelect>
          <ElInput
            v-if="action.type === 'alert'"
            v-model="action.params.message"
            placeholder="消息内容（支持 {{input1.value}}）"
          />
          <div class="action-controls">
            <ElButton type="danger" size="small" @click="removeAction(index)">🗑️</ElButton>
          </div>
        </div>
      </ElFormItem>
    </ElForm>
  </ElCard>
</template>

<style scoped>
.action-item {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
}
.action-controls {
  margin-left: auto;
}
</style>
